<template>
  <div class="alarm-todo-action">
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card shadow="never">
          <el-tree
            ref="tree"
            :expand-on-click-node="false"
            :data="data"
            :props="defaultProps"
            check-strictly
            accordion
            default-expand-all
            highlight-current
            node-key="id"
            @node-click="handleNodeClick"/>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card :style="{marginBottom: '10px'}" shadow="never">
          <div class="search-box">
            <div class="search-form">
              <el-form ref="searchform" :model="searchform" inline label-width="120px">
                <el-form-item :style="{marginBottom: 0}" :label="$t('AlarmCode')">
                  <el-input
                    v-model.trim="searchform.alarmCode"
                    :placeholder="`${$t('pleaseInput')}${$t('alarmId')}`"
                    clearable
                    @clear="initTableList"/>
                </el-form-item>
                <el-form-item :style="{marginBottom: 0}">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="filterHandler"
                  >
                    {{ $t("search") }}</el-button
                    >
                </el-form-item>
              </el-form>
            </div>
            <div class="search-opts">
              <el-button
                :style="{marginRight: '10px'}"
                type="primary"
                icon="el-icon-download"
                @click="downloadFile"
              >{{ $t("downloadTemp") }}</el-button>
              <upload-btn
                :upload-success="uploadSuccess"
                :upload-fail="importFail"
                action="/config/upload/submit?name=AlarmCodeExcelList"
              />
            </div>
          </div>
        </el-card>
        <el-card shadow="never">
          <el-row>
            <el-form ref="form" :model="form" :rules="rules" inline label-width="120px">
              <el-form-item :label="$t('repeatCount')" :style="{width: '48%'}">
                <el-input
                  v-model="form.repeatCount"
                  :style="{width: '100%'}"
                  :placeholder="`${$t('pleaseInput')}${$t('repeatCount')}`"
                  clearable/>
              </el-form-item>
              <el-form-item :label="$t('effectiveTimes')" :style="{width: '48%'}">
                <el-input
                  v-model="form.effectiveTime"
                  :style="{width: '100%'}"
                  :placeholder="$t('unitHour')"
                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
                  clearable/>
              </el-form-item>
              <el-form-item :label="$t('holdCode')" :style="{width: '48%'}">
                <el-input v-model="form.holdCode" :style="{width: '100%'}" :placeholder="`${$t('pleaseInput')}${$t('holdCode')}`" clearable/>
              </el-form-item>
              <el-form-item :label="$t('description')" :style="{width: '48%'}">
                <el-input
                  :rows="2"
                  :style="{width: '100%'}"
                  :placeholder="`${$t('pleaseInput')}${$t('description')}`"
                  v-model="form.description"
                  type="textarea"/>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <div class="alarm-buttons">
              <el-button
                type="success"
                icon="el-icon-plus"
                @click="alarmAddCodes"
              >
                {{ $t('addAlarmCode') }}</el-button>
            </div>
            <div class="alarmBox">
              <el-table
                :data="alarmCodes"
                :header-cell-style="{ background: '#F2F6FC', color: '#606266' }"
                border
                stripe
                tooltip-effect="dark"
                fit
                highlight-current-row
                style="width: 100%">
                <el-table-column
                  :label="$t('index')"
                  align="center"
                  header-align="center"
                  type="index"
                  width="50"/>
                <el-table-column
                  :label="$t('AlarmCode')"
                  prop="alarmCode"
                  width="100px"
                  align="center"
                  header-align="center"
                />
                <el-table-column
                  :label="$t('alarmDescription')"
                  prop="description"
                  align="center"
                  width="140px"
                  header-align="center"/>
                <el-table-column
                  label="按设备类型/设备"
                  prop="alarmLevel"
                  width="200px"
                  align="center"
                  header-align="center"
                >
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.alarmLevel">
                      <el-radio :label="1">设备类型</el-radio>
                      <el-radio :label="2">设备</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('AlarmLevel')"
                  prop="alarmLevel"
                  align="center"
                  width="140px"
                  header-align="center"
                >
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.alarmLevel" :style="{width: '100%'}" size="small" placeholder=" ">
                      <el-option
                        v-for="item in []"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="Hold Lot"
                  prop="alarmLevel"
                  align="center"
                  header-align="center"
                >
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.holdLot">
                      <el-radio :label="1">整机</el-radio>
                      <el-radio :label="2">
                        Chamber
                        <el-select
                          v-model="scope.row.Chamber"
                          :style="{width: '80px'}"
                          placeholder=" "
                          size="small"
                          multiple>
                          <el-option
                            v-for="item in []"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                        </el-select>
                      </el-radio>
                      <el-radio :label="3">
                        Port
                        <el-select
                          v-model="scope.row.Port"
                          :style="{width: '80px'}"
                          placeholder=" "
                          size="small"
                          multiple>
                          <el-option
                            v-for="item in []"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                        </el-select>
                      </el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="table-save-button">
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="doSave"
              >
                {{ $t('save') }}</el-button>
            </div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTreeList } from '@/api/equipment/prodTreeNode'
import { getCodeInfo, doUpdate } from '@/api/alarm/rulesSetting'
import { download } from '@/api/system/user'
import { getIsEqpType } from '@/api/equipment/eqpInfoManage'
import { mapGetters } from 'vuex'
export default {
  name: 'AlarmTodoAction',
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      isChild: false,
      form: {
        repeatCount: 1
      },
      searchform: {},
      rules: {
        defaultLevel: [
          { required: true, message: `${this.$t('pleaseSelect')}${this.$t('defaultLevel')}`, trigger: 'change' }
        ]
      },
      item: {},
      alarmCodes: [],
      stableList: [] // 清空查询条件时原数组
    }
  },
  computed: {
    ...mapGetters(['baseApi'])
  },
  created() {
    this.initTreeList()
  },
  methods: {
    async initTreeList() {
      const res = await getTreeList({ check: 1 })
      this.data = res.data
    },
    doSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          doUpdate({ ...this.form, alarmCodes: this.alarmCodes }).then(res => {
            this.$betterTips(res)
          })
        } else {
          return false
        }
      })
    },
    async handleNodeClick(data) {
      this.$refs.tree.setCheckedKeys([data.id])
      // 接口状态返回的是 0, 1
      const res = await getIsEqpType({ layoutId: data.id })
      if (data.children && data.children.length > 0 || !res.data) {
        this.isChild = false
      } else {
        getCodeInfo({ eqpModel: data.id }).then(res => {
          const { alarmCodes, ...obj } = res.data
          this.form = obj
          this.alarmCodes = alarmCodes
          this.isChild = true
          // getinfo时得赋下值
          this.stableList = alarmCodes.slice(0)
          this.$nextTick(() => {
            this.$refs['form'].clearValidate()
          })
        })
      }
    },
    filterHandler() {
      this.alarmCodes = this.alarmCodes.filter(v => v.alarmCode.toLowerCase().includes(this.searchform.alarmCode.toLowerCase()))
    },
    initTableList() {
      this.alarmCodes = this.stableList
    },
    downloadFile() {
      download({ name: 'AlarmCodeExcelList' }).then((res) => {
        window.open(this.baseApi + '/' + res.data)
      })
    },
    uploadSuccess(response, file, fileList) {
      if (response.code !== 1) {
        const h = this.$createElement
        const listVNode = response.data.map((item) => {
          return (
            <p style={ { width: '240px' }}>
              <span style={ { width: '100%', wordWrap: 'break-word' }}>{item.index ? `第{${item.index}}行` : ''}{this.$t(item.msgCode)}</span>
            </p>
          )
        })
        const styles = {
          color: 'teal',
          overflowX: 'hidden',
          overflowY: 'auto',
          width: '280px',
          maxHeight: 'calc(100vh - 120px)'
        }
        this.$notify({
          message: h('div', { style: styles }, listVNode),
          type: 'error',
          duration: 0
        })
        fileList = []
      } else {
        this.$betterTips(response, this.initList)
      }
    },
    importFail() {
      this.$notify({
        message: this.$t('uploadFail'),
        type: 'error',
        duration: 3500
      })
    },
    alarmAddCodes() {
      this.alarmCodes.unshift({ alarmCode: '', alarmLevel: '', isValid: 0, description: '', holdLot: 1 })
      this.stableList = this.alarmCodes.slice(0)
    }
  }
}
</script>

<style scoped lang="scss">
.alarm-todo-action{
    background-color: #fff;
    padding: 20px;
}
::v-deep .el-select{
    width: 100%;
}
::v-deep .item-label .el-checkbox{
  width: 100%;
}
::v-deep .el-checkbox__label{
  width: 100%;
  padding-right: 10px;
}
::v-deep .el-form-item .el-form-item__content{
  width: calc(100% - 160px);
}
.alarmBox{
  max-height: calc(100vh - 450px);
  overflow-y: auto;
}
.table-save-button{
  width: 100%;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.search-box{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.alarm-buttons{
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
